<template>
<div class="vue-boxs bot sbot-fluid">
  <!-- 参数栏 -->
  <div class="c-panel">
    <el-form :inline="true">
      <!-- 表单 -->
      <sa-item v-model="m.name" type="text" name="模型名" br />
      <sa-item v-model="m.code" type="text" name="识别码" br />
      <sa-item v-model="m.type" type="enum" jtype="4" :jv="dims.MOD_TYPE" name="来源" br />
      <sa-item v-model="m.url" type="text" name="URL" br />
      <sa-item v-model="m.appId" type="text" name="APPID" br />
      <sa-item v-model="m.apiKey" type="text" name="APIKEY" br />
      <sa-item v-model="m.apiSecret" type="text" name="APISECRET" br />
      <sa-item v-model="m.method" type="text" name="请求方式" br />
      <sa-item v-model="m.contentType" type="text" name="参数类型" br />
      <sa-item v-model="m.extraFields" name="扩展属性" br>
        <template>
          <div class="extra_fields_box">
            <div class="field_box" v-for="(item, index) in extraFields" :key="index">
              <el-input v-model="item.note" placeholder="属性名" clearable />
              <el-input v-model="item.key" placeholder="属性键" clearable />
              <el-input v-model="item.val" placeholder="属性值" clearable />
              <el-button type="danger" circle icon="el-icon-minus" @click="delField(index)" />
            </div>
            <div class="field_box">
              <el-button type="primary" size="mini" circle icon="el-icon-plus" @click="addField()" />
            </div>
          </div>
        </template>
      </sa-item>
      <sa-item v-model="m.sort" type="text" name="排序" br />
    </el-form>
  </div>
</div>
</template>

<script>
export default {
  name: 'mod-add',
  props: {
    param: Object
  },
  data() {
    return {
      // 超级对象
      m: this.param,
      dims: sa.$sys.getCurd(),
      extraFields: []
    }
  },
  created: function () {
    if (this.param.extraFields) {
      this.extraFields = JSON.parse(this.param.extraFields)
    }
  },
  methods: {
    createModel() {
      return {}
    },
    // 变更
    ok: function () {
      // 表单校验
      let m = this.m;
      sa.checkNull(m.code, '请输入识别码');
      sa.checkNull(m.name, '请输入模型名');
      sa.checkNull(m.type, '请输入模型来源');
      // 编辑
      this.m.extraFields = JSON.stringify(this.extraFields)
      sa.ajax('/mod/update', m, function (res) {
        sa.alert(res.msg, function () {
          this.m = this.createModel();
          sa.closeModel();
          sa.currView().f5();
        }.bind(this));
      }.bind(this), {
        type: 'post'
      });
    },
    // 新增扩展属性
    addField() {
      this.extraFields.push({
        key: null,
        val: null,
        note: null
      });
    },
    // 删除扩展属性
    delField(index) {
      this.extraFields.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.extra_fields_box {
  width: calc(100% - 160px);
  height: 100%;
  overflow: auto;
}

.field_box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-input {
  padding: 0px 5px;
  height: 100%;
}

.field_box .el-button {
  border-radius: 5px;
  text-align: center;
}
</style>
